import React, { Component } from 'react';
import {Modal,Form,Input,message} from 'antd';
import axios from 'axios';


export default class Adduser extends Component {
  state={imageurl: '请稍等···'}

  formRef = React.createRef();//重置表单没有实现

  cancelForm=()=>{
    this.formRef.current.resetFields();
    this.props.close();
  }
  

  handleSubmit=()=>{
    let that=this;

    this.formRef.current.validateFields()
    .then(values=>{
      message.info('添加成功！');

      this.cancelForm();

      values.manage_avatar=this.state.imageurl;

      const token=localStorage.getItem('token');
        if(token){
            axios.post("https://wx.xxmtcds.top:2333/admin/adminlist",values,{
              headers: { 'authorization': `${token}` }
            })
              .then(function(response){
                console.log(response);
                that.props.get();
              })
              .catch(err=>console.log(err))
      }
      }).catch(errorInfo=>{
        console.log(errorInfo);
        message.error('添加失败！');
      })
  }


  imageitem=(e)=>{
    let that=this;

    let image=document.getElementById('imageitem').files[0];
 
      var formData=new FormData();
      formData.append('image',image);
     
      const token=localStorage.getItem('token');
      if(token){
          // console.log(token);
          axios.post("https://wx.xxmtcds.top:2333/admin/storeimage",formData,{
            headers: { 'authorization': `${token}`,'content-type':'multipart/form-data' }
          })
            .then(function(response){
              that.setState({imageurl: response.data})
            })
            .catch(err=>console.log(err))
      }
      
  }


  render() {
    return (
      
      <Modal
          title='添加用户信息'
          okText='确定'
          cancelText='取消'
          visible={this.props.visible}
          onCancel={this.cancelForm}
          onOk={()=>{ this.handleSubmit()} } >
          <Form 
            ref={this.formRef}
            layout="horizontal"
            labelCol={{span:4}}//不能超过24
            wrapperCol={{span:10}}>
              
                
            <Form.Item name="manage_account" label='用户名' 
                rules={[ {
                        required:true,
                        message:'请输入用户名',
                    }]}>
              <Input placeholder='用户名' />  
            </Form.Item>
            <Form.Item name="manage_pwd" label='密码' 
                rules={[{
                        required:true,
                        message:'请输入密码',
                    }]}>
              <Input placeholder='密码' />  
            </Form.Item>
            <Form.Item name="manage_avatar" label='头像' 
                rules={[{
                        message:'请选择头像',
                    }]}>
              <Input placeholder={this.state.imageurl} disabled={true}/>
              <input type='file' placeholder='上传头像' accept=".jpg" name="storefile" onChange={this.imageitem} id="imageitem"/>
                  
            </Form.Item>
          </Form>
      </Modal>
        

    );
  }
}



